import React, { useEffect, useRef, useState, useCallback } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { Helmet } from 'react-helmet'
import { setViewHistory } from 'utils/playLocal'
import { getVideoDetail, dealVideo } from '@/redux/async'
import { getRecommendVides, getComments } from 'api/base'
import { formatCount, getPicUrl, formatDate } from 'utils/index'
import Header from '@/components/Header/Header'
import ScrollToTop from '@/components/ScrollToTop/ScrollToTop'
import VideoPlayer from '@/components/VideoPlayer/VideoPlayer'
import './index.scss'
function Video(props) {
    const { dispatch, video, match } = props
    const introRef = useRef()
    const arrowRef = useRef()
    const contentRef = useRef()
    const [isexpand, setIsexpand] = useState(false)
    const [page, setPage] = useState(1)
    const [reVideos, setReVideos] = useState([])
    const [comments, setComments] = useState([])
    const [totalCount, setTotalCount] = useState(0)
    const [max, setMax] = useState(1)
    const [aId] = useState(match.params.aId)
    useEffect(() => {
        dispatch(getVideoDetail(aId))
    }, [])
    useEffect(() => {
        setViewHistory({
            aId: video.aId,
            title: video.title,
            pic: video.pic,
            viewAt: new Date().getTime()
        })
    }, [video])
    useEffect(() => {
        getRecommendVides(aId).then((res) => {
            let video = dealVideo(res.data)
            setReVideos(video)
        })
    }, [aId])
    useEffect(() => {
        getComments({ aId, p: page }).then((res) => {
            let { page, replies } = res.data
            setTotalCount(() => Math.ceil(page.count / page.size))
            setMax(page.count)
            setComments(() => dealComment(replies))
        })
    }, [aId, page])
    const dealComment = useCallback((data) => {
        return data.map((e) => {
            let date = formatDate(new Date(e.ctime * 1000), 'yyyy-MM-dd hh:mm')
            return {
                content: e.content.message,
                date,
                user: {
                    mId: e.member.mid,
                    name: e.member.uname,
                    face: e.member.avatar
                }
            }
        })
    })
    const toggle = useCallback(() => {
        const arrowDOM = arrowRef.current
        const introDOM = introRef.current
        const contentDOM = contentRef.current
        const titleDOM = contentDOM.getElementsByTagName('div')[0]
        if (isexpand) {
            titleDOM.style.whiteSpace = 'normal'
            introDOM.style.height = contentDOM.offsetHeight + 'px'
            arrowDOM.classList.add('rotate')
            setIsexpand(false)
        } else {
            titleDOM.style.whiteSpace = 'nowrap'
            introDOM.style.height = null
            arrowDOM.classList.remove('rotate')
            setIsexpand(true)
        }
    })

    return (
        <div className="movie">
            <Helmet>
                <title>{video.title}</title>
                <meta name="title" content={video.title} />
                <meta name="description" content={video.desc} />
            </Helmet>
            <div className="top">
                <Header />
            </div>
            {video.aId ? (
                <div className="content-wrapper">
                    <div className="movie-box">
                        <VideoPlayer
                            video={{
                                aId: video.aId,
                                cId: video.cId,
                                title: video.title,
                                cover: getPicUrl(video.pic, '@400w_300h'),
                                duration: video.duration,
                                url: video.url
                            }}
                        />
                    </div>
                    <div className="movie-info" ref={introRef}>
                        <i
                            className={`icon-arrow-down arrow`}
                            ref={arrowRef}
                            onClick={() => toggle()}
                        />
                        <div className="intro" ref={contentRef}>
                            <div className="title">{video.title}</div>
                            <div className="flex col-hui m middle">
                                <div className="col-333 l"></div>
                                <Link to={'/space/' + video.owner.mId}>
                                    <span className="col-333  bold mr10">{video.owner.name}</span>
                                </Link>
                                <div className="col-hui ">{formatCount(video.playCount)}次观看</div>
                                <div className="ml10 mr10">
                                    {formatCount(video.barrageCount)}弹幕
                                </div>
                                <span>{video.publicDate}</span>
                            </div>
                            <div className="desc">{video.desc}</div>
                            <div className="position">
                                <a className="mr5 col-plink" href="/index">
                                    主页
                                </a>
                                <span className="mr5">&gt;</span>
                                <a className="mr5 col-plink" href={'/channel/' + video.twoLevel.id}>
                                    {video.twoLevel.name}
                                </a>
                                <span className="mr5">&gt;</span>
                                <span className="aid">av{video.aId}</span>
                            </div>
                        </div>
                    </div>
                    <div className="video-recommand">
                        {reVideos.map((e) => (
                            <a key={e.aId} href={'/video/av' + e.aId}>
                                <div className="flex item">
                                    <div className="av-imgbox">
                                        <img src={getPicUrl(e.pic, '@320w_200h')} alt="" />
                                        <div className="duration">{e.duration}</div>
                                    </div>
                                    <div className="cell-main ml10">
                                        <div className="l row2 av-title mb10">{e.title}</div>
                                        <div className="flex col-hui m middle">
                                            <div className="">{formatCount(e.playCount)}次观看</div>
                                            <div className="">
                                                {formatCount(e.barrageCount)}弹幕
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        ))}
                    </div>
                    {comments.length > 0 ? (
                        <div className="comment">
                            <div className="comment-title item xxl">评论(&nbsp;{max}&nbsp;)</div>
                            <div className="comment-list">
                                {comments.map((e, i) => (
                                    <div key={i} className="flex  comment-item">
                                        <Link to={'/space/' + e.user.mId}>
                                            <img
                                                className="avatar"
                                                src={getPicUrl(e.user.face, '@60w_60h')}
                                                alt={e.user.name}
                                            />
                                        </Link>
                                        <div className="cell-main ml10">
                                            <div className="l col-hui mb10 flex between overhide">
                                                <Link
                                                    className="cell-main"
                                                    to={'/space/' + e.user.mId}
                                                >
                                                    {e.user.name}
                                                </Link>
                                                <span className="m">{e.date}</span>
                                            </div>
                                            <div className="comment-desc">{e.content}</div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ) : null}
                    {totalCount > page ? (
                        <div
                            className="load-more"
                            onClick={() => {
                                setPage((page) => ++page)
                            }}
                        >
                            点击加载更多评论
                        </div>
                    ) : (
                        <div className="no-more">没有更多了 ~</div>
                    )}
                </div>
            ) : null}
            <ScrollToTop />
        </div>
    )
}

export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(Video)
